<template>
    <section class="t-body">
        <div class="hot">
            <span class="sun"></span><span class="sunx"></span>
        </div>
        <div class="cloudy">
            <span class="cloud"></span><span class="cloudx"></span>
        </div>
        <div class="stormy">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="snowe"></span><span class="snowex"></span><span class="stick"></span><span
                class="stick2"></span>
        </div>
        <div class="breezy">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="cloudr"></span>
        </div>
        <div class="night">
            <span class="moon"></span><span class="spot1"></span><span class="spot2"></span>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </section>
</template>

<script>
    export default {
        name: "css-weather"
    }
</script>

<style lang="scss" scoped>
    .t-body {
        position: relative;
        height: 400px;

        div {
            width: 130px;
            height: 130px;
            border-radius: 40%;
            z-index: 120
        }

        .hot {
            position: absolute;
            top: 25%;
            left: 20%;
            background: linear-gradient(to top right, rgba(255, 87, 34, 1) 0, rgba(251, 140, 0, 1) 100%);
            box-shadow: 1px 1px 30px rgba(255, 111, 0, 1)
        }

        .sun {
            position: absolute;
            top: -10%;
            left: 65%;
            width: 50px;
            height: 50px;
            border-radius: 100%;
            background: linear-gradient(to bottom left, rgba(255, 235, 59, 1) 0, rgba(249, 168, 37, 1) 90%);
            box-shadow: 1px 1px 30px rgba(255, 160, 0, 1);
            animation: inex 3s infinite linear
        }

        .sunx {
            position: absolute;
            top: 30%;
            left: 45%;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #fff;
            opacity: .2
        }

        .cloudy {
            position: absolute;
            top: 25%;
            left: 45%;
            background: linear-gradient(to top right, rgba(63, 81, 181, 1) 0, rgba(3, 155, 229, 1) 40%);
            box-shadow: 1px 1px 30px rgba(2, 119, 189, 1)
        }

        .cloud {
            position: absolute;
            top: 5%;
            left: 70%;
            width: 60px;
            height: 20px;
            border-radius: 10px;
            background-color: rgba(129, 212, 250, 1);
            box-shadow: 1px 1px 30px rgba(0, 151, 167, 1);
            animation: move 3s infinite linear
        }

        .cloudx {
            position: absolute;
            top: 23%;
            left: 55%;
            width: 60px;
            height: 20px;
            border-radius: 10px;
            background-color: rgba(129, 212, 250, 1);
            animation: move 3s infinite linear
        }

        .stormy {
            position: absolute;
            top: 25%;
            left: 70%;
            background: linear-gradient(to top right, rgba(117, 117, 117, 1) 0, rgba(33, 33, 33, 1) 90%);
            box-shadow: 1px 1px 30px rgba(33, 33, 33, 1)
        }

        .stormy li {
            position: absolute;
            list-style: none;
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background-color: #777;
            box-shadow: 1px 1px 30px #555;
            animation: fall 3s infinite linear;
            opacity: 0
        }

        .stormy li:nth-child(1) {
            top: 0;
            left: 100%
        }

        .stormy li:nth-child(2) {
            top: 5%;
            left: 90%
        }

        .stormy li:nth-child(3) {
            top: -10%;
            left: 80%;
            animation-delay: 2s
        }

        .stormy li:nth-child(4) {
            top: 10%;
            left: 100%;
            animation-delay: 2s
        }

        .stormy li:nth-child(5) {
            top: 20%;
            left: 80%;
            animation-delay: .5s
        }

        .stormy li:nth-child(6) {
            top: 35%;
            left: 70%;
            background-color: #bbb;
            animation-delay: .5s
        }

        .stormy li:nth-child(7) {
            top: 23%;
            left: 60%;
            background-color: #bbb;
            animation-delay: .8s
        }

        .stormy li:nth-child(8) {
            top: 5%;
            left: 70%;
            background-color: #bbb;
            animation-delay: .8s
        }

        .snowe {
            position: absolute;
            top: 60%;
            left: 40%;
            width: 40px;
            height: 40px;
            border-radius: 60px;
            background-color: #ddd
        }

        .snowex {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 15px;
            height: 15px;
            border-radius: 15px;
            background-color: #bbb
        }

        .stick {
            position: absolute;
            top: 60%;
            left: 40%;
            width: 3px;
            height: 15px;
            transform: rotate(-45deg);
            background-color: #333;
            z-index: -10
        }

        .stick2 {
            position: absolute;
            top: 60%;
            left: 70%;
            width: 3px;
            height: 15px;
            transform: rotate(45deg);
            background-color: #333;
            z-index: -10
        }

        .breezy {
            position: absolute;
            top: 60%;
            left: 30%;
            background: linear-gradient(to top right, rgba(156, 204, 101, 1) 0, rgba(38, 198, 218, 1) 50%);
            box-shadow: 1px 1px 30px rgba(38, 198, 218, 1)
        }

        .cloudr {
            position: absolute;
            top: 5%;
            left: 60%;
            width: 60px;
            height: 20px;
            border-radius: 10px;
            background-color: rgba(96, 125, 139, 1);
            box-shadow: 1px 1px 30px rgba(84, 110, 122, 1);
            animation: flash 1.5s infinite linear
        }

        .breezy li {
            position: absolute;
            list-style: none;
            width: 2px;
            height: 7px;
            border-radius: 10%;
            background-color: #eee;
            opacity: 0;
            animation: fall 3s infinite linear;
            transform: rotate(25deg)
        }

        .breezy li:nth-child(1) {
            top: 10%;
            left: 95%
        }

        .breezy li:nth-child(2) {
            top: 5%;
            left: 83%;
            animation-delay: .3s
        }

        .breezy li:nth-child(3) {
            top: 4%;
            left: 87%;
            animation-delay: .6s
        }

        .breezy li:nth-child(4) {
            top: 15%;
            left: 70%;
            animation-delay: 1s
        }

        .breezy li:nth-child(5) {
            top: 10%;
            left: 75%
        }

        .night {
            position: absolute;
            top: 60%;
            left: 60%;
            background: linear-gradient(to bottom right, rgba(63, 81, 181, 1) 0, rgba(171, 71, 188, 1) 70%);
            box-shadow: 1px 1px 30px rgba(81, 45, 168, 1)
        }

        .moon {
            position: absolute;
            top: -10%;
            left: 65%;
            width: 70px;
            height: 70px;
            border-radius: 100%;
            background: rgba(255, 241, 118, 1);
            box-shadow: 1px 1px 30px rgba(224, 224, 224, 1)
        }

        .spot1 {
            position: absolute;
            top: 0;
            left: 85%;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #777
        }

        .spot2 {
            position: absolute;
            top: 30%;
            left: 75%;
            width: 5px;
            height: 5px;
            border-radius: 100%;
            background-color: #777
        }

        .night li {
            position: absolute;
            list-style: none;
            width: 3px;
            height: 3px;
            border-radius: 100%;
            background-color: #fff;
            transform: rotate(45deg)
        }

        .night li:nth-child(1) {
            top: 30%;
            left: 65%
        }

        .night li:nth-child(2) {
            top: 35%;
            left: 53%
        }

        .night li:nth-child(3) {
            opacity: 0;
            top: 20%;
            left: 75%;
            width: 2px;
            height: 2px;
            animation: meteor 1.5s infinite linear;
            animation-delay: .6s
        }

        .night li:nth-child(4) {
            top: 5%;
            left: 50%
        }

        .night li:nth-child(5) {
            opacity: 0;
            top: 20%;
            left: 55%;
            width: 1px;
            height: 15px;
            animation: meteor 1.5s infinite linear
        }

        @keyframes inex {
            50% {
                opacity: .4
            }

            60% {
                opacity: 1
            }
        }

        @keyframes move {
            50% {
                transform: translateX(-10px)
            }
        }

        @keyframes fall {
            10% {
                opacity: .8
            }

            50% {
                opacity: 1;
                transform: translate(-10px, 30px)
            }

            100% {
                transform: translate(-25px, 70px)
            }
        }

        @keyframes flash {
            48% {
                background-color: rgba(96, 125, 139, 1)
            }

            50% {
                background-color: #fff
            }

            55% {
                background-color: rgba(96, 125, 139, 1)
            }

            57% {
                background-color: #fff
            }
        }

        @keyframes meteor {
            10% {
                opacity: 1
            }

            80% {
                left: 10%;
                top: 75%;
                opacity: 0
            }
        }
    }
</style>
